<template>
  <ul class="order-list">
    <li class="order-item">
      <div class="title"
           border-bottom-1px>
        <div class="order-num">订单编号<span>{{orderNo}}</span></div>
        <div class="pay-state"
             :class="{red: status === '已完成'? false : status==='已支付'? false : true}"
             @click="handlePay(orderNo)">{{status}}</div>
      </div>
      <ul class="product-list">
        <li class="product-item"
            v-for="item of newList"
            :key="item.goods_id">
          <div class="top">
            <div class="top-left">
              <div class="img-wrap">
                <div class="container"
                     w-150-150
                     aspectratio>
                  <img :src="item.goods_image"
                       alt=""
                       aspectratio-content>
                </div>
              </div>
              <div class="product-info">
                <div class="name">{{item.goods_name}}</div>
                <div class="num">x{{item.total_num}}</div>
              </div>
            </div>
            <div class="top-right">￥{{item.goods_price}}</div>
          </div>
        </li>
      </ul>
      <div class="bot">
        <div class="total-num">共 <span>{{totalNum}}</span> 件商品</div>
        <div class="total-price">实付 <span>￥{{payPrice}}.00</span></div>
      </div>
    </li>
  </ul>
</template>
<script>
import { ellipsis } from '@/assets/js/util'
export default {
  name: 'list',
  data () {
    return {
      totalNum: 0,
      totalPrice: 0
    }
  },
  props: {
    orderNo: String,
    status: String,
    list: Array,
    payPrice: String
  },
  computed: {
    newList () {
      const result = []
      this.list.map((item) => {
        item.goods_name = ellipsis(item.goods_name, 22)
        result.push(item)
      })
      return result
    }
  },
  methods: {
    _initTotal () {
      this.list.map((item) => {
        this.totalNum += item.total_num
        this.totalPrice += item.total_num * Number(item.goods_price)
      })
      if (this.status === '未支付' || this.status === '取消支付') {
        this.totalPrice = 0
      }
    },
    handlePay () {
      if (this.status === '未支付') {

      } else {
        return false
      }
    }
  },
  mounted () {
    this._initTotal()
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.order-list
  width 100%

  .order-item
    width 100%
    padding()
    background-color $common_bgc
    padding-bottom 30px
    margin-bottom 20px

    .title
      width 100%
      height 104px
      display flex
      align-items center
      justify-content space-between
      margin-bottom 50px

      .order-num, .pay-state
        font-size $shop_name
        font-weight 400
        color common_fz_color

        span
          margin-left 10px

      .pay-state
        color $paidState

      .red
        color $afterSale

    .product-list
      width 100%

      .product-item
        width 100%
        margin-bottom 30px

        .top
          display flex
          justify-content space-between

          .top-left
            display flex

            .img-wrap
              width 150px
              background-color $use_color

            .product-info
              margin-left 24px

              .name
                max-width 314px
                font-size $address
                font-weight 400
                color $footer_bgc
                line-height 32px
                margin-bottom 30px
                max-height 64px
                overflow hidden
                position relative

              .num
                font-size $delete
                font-weight 500
                color $use_color
                line-height 30px

          .top-right
            font-size $address
            font-weight 500
            color $footer_bgc

    .bot
      display flex
      justify-content flex-end
      align-items center

      .total-num
        font-size $delete
        font-weight 400
        color #9C9EA5
        margin-right 40px

        span
          color $footer_bgc

      .total-price, span
        font-size $shop_name
        font-weight 400
        color $footer_bgc

      span
        font-size $address
</style>
